<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>Prop</title>
        <script src="vue@3.2.26.js"></script>
    </head>
    <body>

        <h3>通过Prop向子组件传递数据</h3>

        <ul>
            <li>Prop是你可以在组件上注册的一些自定义 attribute</li>
            <li>当一个值被传递给一个 prop attribute 时，它就成为该组件实例中的一个 property</li>
            <li>该 property 的值可以在模板中访问，就像任何其他组件 property 一样</li>
        </ul>

        <!-- 指定根组件的挂载点 -->
        <div id="root">
            <!-- 3、使用组件 并 为组件指定 属性(attribute) -->
            <wrapper width="400px" height="100px" border="1px solid blue" title="期望早日解封，可以回家过年"></wrapper>
            <br>
            <!-- 这里的 width 、height 、border 、title 都相当于是 wrapper 标签的属性(attribute) -->
            <wrapper width="450px" height="100px" border="1px solid green" title="期望早日解封，可以回家过年"></wrapper>
        </div>

        <script type="text/javascript">

            const app = Vue.createApp( { 

            } );

            // 1、定义组件
            const wrapper = {
                props: [ 'width' , 'height' , 'border' , 'title' ],
                // 通过 v-bind:style 可以绑定内联样式
                template: `<div v-bind:style="{ width: width , height: height , border: border }" v-on:click="handle">
                            {{tip}} {{ title }}
                           </div>`,
                data(){
                    return {
                        tip: '提示:' 
                    }
                },
                methods: {
                    handle(){
                        console.log( this );
                    }
                }
            }

            // 2、注册组件
            app.component( 'wrapper' , wrapper );

            const vm = app.mount( '#root' );

        </script>
        
    </body>
</html>